<template>
  <div class="Loginbox">
    <div class="login">
      <h1>叩丁狼电商管理系统</h1>

      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            autocomplete="off"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
             placeholder="密码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="logingo('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
 
<script>
import {LoginApi} from '../../../request/api'
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" },
          { validator: this.loginVali, trigger: "blur" }
        ],
        password:[  { required: true, message: "密码不能为空", trigger: "blur" },
        { validator: this.passwordVali, trigger: "blur" }
          ]
      },
    };
  },
  methods: {
      //登录按钮点击
      logingo(){
          //触发组件的方法校验账号和密码
        //   this.$refs.ruleForm.validate((vail)=>{
        //       if(vail){
        //           console.log("校验通过");
        //       }else{
        //           console.log("校验不通过");
        //       }
        //   })
        //第二种方法
        //用promise的成功回调和失败回调来返回结果
        this.$refs["ruleForm"].validate().then(res=>{
            console.log("校验通过");
            //登录发出请求
            LoginApi({
                //请求参数是账号和密码
                password:this.ruleForm.password,
                username:this.ruleForm.username
            }).then(res=>{
                if(res.errno===0){
                    //永久存储了token
                    localStorage.setItem("token",res.data.token)
                    this.$store.commit("SAVEMENU",res.data.menu)
                    this.$router.push('/homepage')
                }
            })
        }).catch(err=>{
            console.log("校验失败");
        })
      },
      //判断账号和密码的输入长度
    loginVali(rule, value, cb) {
      console.log(value);
      if (value.length > 1 && value.length < 20) {
        cb();
      }else{
          cb('账号长度为1-20字符')
      }
    }, 
    //密码的长度校验
    passwordVali(rule, value, cb) {
      console.log(value);
      if (value.length >= 1 && value.length < 20) {
        cb();
      }else{
          cb('账号长度为1-20字符')
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
   /* login的大盒子 */
.Loginbox {
  height: 100%;
  background-color: #253954;
  position: relative;
}
/* login第二盒子 */
.login {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  margin: auto;
  text-align: center;
}
/* 标题 */
h1 {
  color: #fff;
  padding-bottom: 20px;
  box-sizing: border-box;
}
</style>